/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-style: normal;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

img {
  display: block;
}

a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@function p2r ($px) {
  @return calc(100vw / 1080 * $px)
}

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: p2r(16);
  background: #8d8d8d;
  width: 100vw;
  height: 100vh;
  font-family: "Franklin Gothic";
  font-weight: 600;
  user-select: none;
}

.box {
  width: p2r(900);
  height: p2r(400);
  background: #b3b3b3;
  border: p2r(5) solid #fea400;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;

  .icon {
    position: absolute;
    top: p2r(3);
    right: p2r(5);
    font-style: italic;
    font-size: p2r(35);

    span {
      font-family: "Forte";
      font-style: italic;
      text-decoration: underline;
    }
  }

  .left {
    padding: p2r(30);
    width: p2r(500);
    height: 100%;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    grid-column-gap: p2r(10);
    grid-row-gap: p2r(10);

    .key {
      border-radius: p2r(5);
      background: #808080;
      border: p2r(1) solid #515151;
      border-left-color: #919191;
      border-top-color: #919191;
      box-shadow: p2r(3) p2r(3) p2r(5) #111;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: p2r(30);
    }

    .key.active {
      background: #ffa600;
      border-color: transparent;
      box-shadow: p2r(3) p2r(3) p2r(5) #ffa600;
    }
  }

  .right {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .switch {
      font-size: p2r(30);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;

      .button {
        height: p2r(45);
        width: p2r(90);
        background: #000;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: p2r(5);
          left: p2r(5);
          height: p2r(35);
          width: p2r(35);
          background: #0000FF;
          box-shadow: 0 0 p2r(3) #0000FF;
          border-radius: p2r(4);
          pointer-events: none;
          transition: all .2s ease-in-out;
        }

        &.active::after {
          left: p2r(50);
        }
      }
    }

    .info {
      width: p2r(250);
      height: p2r(60);
      background: #808080;
      line-height: p2r(60);
      text-align: center;
      font-size: p2r(30);
    }

    .progressBar {
      width: p2r(320);
      height: p2r(7);
      background: #424242;
      border: p2r(2) solid #141414;
      position: relative;
      cursor: pointer;

      .slider {
        display: block;
        position: absolute;
        left: 0;
        margin-left: p2r(-4);
        top: p2r(-13.5);
        width: p2r(8);
        height: p2r(30);
        background: #0000FF;
        box-shadow: 0 0 p2r(3) #171646;
      }
    }
  }
}
